<template>
  <div class="content_box">
    <!-- 栏目 -->
    <div class="lanmu_box" v-if="activeShow">
     <div class="box">
       <van-tabs :active="active" @change="tabChange">
         <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
       </van-tabs>
     </div>
    </div>
  
     <div class="list_box" v-if="list.length">
       <div @click="toXq(item.id)" :class="item.orderTotalState==1||item.orderTotalState==0?'box':'box on'" v-for="(item,index) in list" :key="index">
         <div class="status">
           <div class="jjz">
             <div class="num">
               <img mode="widthFix" src="/static/images/order_icon1.png" alt="">
               <p class="orderId">订单号：{{item.id}}</p>
               <p class="sjx">的</p>
             </div>
              <p class="sbx" v-if="item.orderTotalState==1"><span>使用中<van-icon name="arrow" /></span></p>
              <p class="sbx sbx_on" v-else-if="item.orderTotalState==0"><span>已预约<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==2"><span>已完成<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==3"><span>已取消<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==4"><span>待付款<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==5"><span>正在付款<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==6"><span>提前取消<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==7"><span>提前结束<van-icon name="arrow" /></span></p>
              <p class="sbx" v-else-if="item.orderTotalState==8"><span>平台退款<van-icon name="arrow" /></span></p>
           </div>
         </div>
         <div class="room_msg">
           <div class="msg">
             <img class="bj" src="/static/images/order_img.png" alt="">
             <div class="room">
               <p class="name">{{item.roomName}}</p>
               <p class="text">预定房间</p>
             </div>
             <div class="room">
               <p class="name">￥{{item.realPrice}}</p>
               <p class="text">实际支付</p>
             </div>
           </div>
         </div>
         <div class="list_msg">
           <div class="list">
             <p class="title">开始时间</p>
             <p class="text">{{item.startTime}}</p>
           </div>
           <div class="list on">
             <p class="title">结束时间</p>
             <p class="text">{{item.endTime}}</p>
           </div>
           <div class="list on">
             <p class="title">支付方式</p>
             <p class="text">[{{item.payType?'余额':'微信'}}] 支付￥{{item.realPrice}}</p>
           </div>
           <div class="list">
             <p class="title">下单时间</p>
             <p class="text">{{item.createTime}}</p>
           </div>
         </div>
         <!-- 使用中 -->
         <div class="button_box" v-if="item.orderTotalState==1">
          <p @click.stop="huanfang" class="xd">换房</p>
         </div>
  
         <!-- 预约中 -->
         <div class="button_box" v-if="item.orderTotalState==0">
           <p @click.stop="huanfang" class="xd">换房</p>
         </div>
       </div>
  
     </div>
     <div class="no_data" v-else>
       <img mode="widthFix" src="/static/images/components/no_order.png" alt="" />
        <!-- <p class="text"></p> -->
     </div>
     
     <div class="pop">
      <van-popup 
        :show="show" 
        @close="onClose"
        close-on-click-overlay
        position="bottom"
      >
        <div class="box">
          <div class="list_box">
            <div class="list_item">
              <div class="list" >
                  <div class="img" @click="previewImage(item.roomImg)">
                      <p class="bj">
                          <van-image
                          width="100"
                          height="100"
                          lazy-load
                          src=""
                          />
                      </p>
                      <p class="num">
                        <img class="tp" mode="aspectFill" src="/static/images/more_img.png" alt="">
                        2
                      </p>
                  </div>
                  <div class="room_msg">
                      <p class="name">测试房间(大包)</p>
                      <div class="label_box">
                        <p>有厕所</p>
                      </div>
                      <div class="price_box">
                        <p class="price"><span>￥</span><span>10/小时</span></p>
                      </div>
                  </div>
              </div>
              <div class="room_btn">
                  <p class="btn1" @click="submit">更换房间</p>
              </div>
          </div>
          </div>
        </div>
      </van-popup>
    </div>
      <!-- <ui-tab-bar :tabBarIndex="1"></ui-tab-bar> -->
   </div>
  </template>
  
  <script>
  import { 
    getToken,
    getUserPhone
  } from "@/utils/auth";
  import { 
   myOrderPage,
   startBack,
   orderUnLock
  } from "@/api/index";
  import { mapState } from 'vuex'
  import { Debounce } from "@/utils/index";
  export default {
   computed: {
     ...mapState(['user']),
   },
   data() {
     return {
       lanmu:[
         {name:'全部',query:''},
         {name:'进行中',query:1},
         {name:'预约中',query:0},
         {name:'已完成',query:2},
         {name:'已取消',query:3}
       ],
       active:1,
       lanmuIndex:0,
       param:{
         current:1,
         size:3,
         query:''
       },
       list:[],
       orderId:'',
       disable:false,
       active: 0,
       activeShow:false,
       isOpen:false,
       roomList:[],
       show:false
     };
   },
   methods: {

    // 关闭弹窗
      onClose(){
        this.show = false
      },
  
      // 换房
      huanfang(){
        this.show = true
      },

      // 确定更换房间
      submit(){
        const _this = this;
        wx.showModal({
          title: '提示',
          content: `是否要更换为房间测试房间`,
          cancelText:'取消',
          confirmText: '确定',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              wx.showLoading({
                title: '更换中...'
              })
            }
          }
        })
      },
  
      // 算选择多少小时
      getHour(s1, s2) {
        var reDate = /\d{4}-\d{1,2}-\d{1,2} /;
        s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/'));
        s2 = new Date((reDate.test(s2) ? s2 : '2018-1-1 ' + s2).replace(/-/g, '/'));
        var ms = s2.getTime() - s1.getTime();
        if (ms < 0) return 0;
        return ms / 1000 / 60 / 60;  //小时
      },
  
      // 跳转续单
      toXudan(item){
        if(!getUserPhone()){
          wx.navigateTo({
            url: '/pages/authorization/main',
          });
          return
        }
        let timeLength = this.getHour(item.startTime,item.endTime)
        
        let info = {
          endTime:item.endTime,
          orderId:item.id,
          price:item.price,
          roomId:item.roomId,
          roomName:item.roomName,
          serviceTime:timeLength,
          startTime:item.startTime
        }
        console.log(info)
        info.endTime = info.endTime.replace(/-/g, '/')
        info.startTime = info.startTime.replace(/-/g, '/')
        wx.navigateTo({
          url: `/pages/renewalOrder/main?info=${JSON.stringify(info)}`,
        });
      },
  
      // 开门
      openDoor:Debounce(function (orderId) {
        if(!getUserPhone()){
          wx.navigateTo({
            url: '/pages/authorization/main',
          });
          return
        }
        if(!this.isOpen){
          this.isOpen = true
          this.$showLoading('开门中...')
          orderUnLock({orderId}).then(res=>{
            if(res.statusCode == '00000'){
              this.isOpen = false
              wx.hideLoading()
              this.$toast('开门成功')
            }else{
              this.isOpen = false
              wx.hideLoading()
              this.$toast(res.message)
            }
          })
          setTimeout(() => {
            
          }, 2000);
        }
      },300),
  
      // 取消订单
      cancelOrder(orderId){
        if(!getUserPhone()){
          wx.navigateTo({
            url: '/pages/authorization/main',
          });
          return
        }
        const _this = this
        wx.showModal({
          title: '提示',
          content: '提前取消平台会依据房间预订详情中的相应条款收取费用，确认取消该订单？',
          success (res) {
            if (res.confirm) {
              _this.$showLoading('取消中...')
              startBack({orderId}).then(res=>{
                if(res.statusCode == '00000'){
                  if(res.data){
                    wx.hideLoading()
                    _this.getList(true)
                    _this.$toast('订单已取消')
                  }else{
                    wx.hideLoading()
                    _this.$toast('取消失败，请稍后再试')
                  }
                }else{
                  wx.hideLoading()
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
  
     //订单列表
      getList(state){
        this.$showLoading('加载中...')
        myOrderPage(this.param).then(res=>{
          if(res.statusCode == '00000'){
            if(this.param.current != 1 && !res.data.records.length){
              wx.showToast({
                title: '已经到底了~',
                icon: 'none',
                duration: 1500
              })
              return
            }
            if(state){
              this.list = []
            }
            this.list = this.list.concat(res.data.records)
            wx.hideLoading()
            wx.hideNavigationBarLoading();
            wx.stopPullDownRefresh();
          }else{
            wx.hideLoading()
            wx.hideNavigationBarLoading();
            wx.stopPullDownRefresh();
          }
        })
      },
  
     // 订单状态切换
     tabChange(e){
       console.log(e)
       let index = e.mp.detail.index
       this.param.current  = 1
       this.param.query = this.lanmu[index].query
       this.getList(true)
       wx.vibrateShort({type:'heavy'});
     },
  
     // 跳转详情
     toXq(orderId){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/order_xq/main?orderId=${orderId}&shareType=0`,
      });
    },
  
   },
   onShow(){
  
   },
   onLoad() {
     this.activeShow = true
     if(!getToken()){
        wx.login({
          success:(res)=>{
            let code = res.code
            this.$store.dispatch("userLogin", code).then(res=>{
              if(res.statusCode == '00000'){
                this.getList(true)
              }
            })
          }
        })
      }else{
        this.getList(true)
      }
   },
  
    // 下拉刷新
    onPullDownRefresh(){
      //在当前页面显示导航条加载动画
      wx.showNavigationBarLoading();
      this.param = {
        current:1,
        size:10,
        query:''
      }
      this.getList(true)
    },
  
   // 上拉加载
   onReachBottom(){
     console.log('到底了')
     this.param.current += 1
     this.getList()
   },
  
   onUnload(){
   },
   onTabItemTap(){
     wx.vibrateShort({type:'heavy'});
     this.param = {
      current:1,
      size:3,
      query:''
    }
     this.getList(true)
   }
  };
  </script>
  
  <style lang="scss" scoped>
  .content_box {
   min-height: 100vh;
   background: #f0f0f0;
   padding-bottom:30rpx;
   .lanmu_box{
     height: 88rpx;
     margin-bottom:20rpx;
     .box{
       position: fixed;
       top:0;
       width: 100%;
       z-index: 100;
       background: #fff;
     }
     /deep/ .van-tab{
       color:#999;
       font-size:30rpx;
     }
     /deep/ .van-tabs__line{
       background: #222;
     }
     /deep/ .van-tab--active{
       color:#222;
       font-weight: bold;
     }
   }
   .list_box{
     width: 92%;
     margin:0 auto;
     .box{
       border-radius: 15rpx;
       margin-bottom:24rpx;
       .jjz{
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         position: relative;
         .num{
           width: 64%;
           height: 60rpx;
           padding:13rpx 0 0rpx 30rpx;
           background: #fff;
           display: flex;
           align-items: center;
           position: relative;
           z-index: 10;
           font-size:28rpx;
           font-weight: bold;
           color:#222222;
           border-top-left-radius: 15rpx;
           img{
             width: 40rpx;
             margin-right:10rpx;
           }
           .orderId{
             width: 100%;
             overflow:hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
           }
           .sjx{
             position: absolute;
             width: 20rpx;
             height: 60rpx;
             padding:20rpx 0 0rpx 30rpx;
             text-align: center;
             z-index: 10;
             right:-35rpx;
             top:0;
             color:#fff;
             font-size: 0rpx;
             &::before{
               content:'';
               position:absolute;
               top:0;
               right:0;
               bottom:0;
               left:0;
               background: #fff;
               transform: skew(25deg);
               color:#aaa;
               border-top-right-radius: 15rpx;
             }
           }
         }
         .sbx{
           position: relative;
           width: 190rpx;
           height: 58rpx;
           line-height: 58rpx;
           text-align: center;
           z-index: 5;
           right:15rpx;
           &::before{
             content:'';
             position:absolute;
             top:0rpx;
             right:15rpx;
             bottom:0;
             left:0;
             background: #80A952;
             transform: skew(25deg);
             color:#aaa;
             border-top-right-radius: 15rpx;
           }
           span{
             position: relative;
             z-index: 100;
             color:#fff;
             font-size:26rpx;
             font-weight: 500;
             margin-left:15rpx;
           }
           &.sbx_on{
             &::before{
               background: #788933;
             }
           }
         }
       }
       .room_msg{
         background: #fff;
         padding-top:24rpx;
         padding-bottom:24rpx;
         
         .msg{
           background: linear-gradient(to right,#EFF5D6, #CCD9A6);
           height: 178rpx;
           margin:0 26rpx;
           display: flex;
           align-items: center;
           justify-content: space-around;
           text-align: center;
          position: relative;
          .bj{
            position: absolute;
            top:0;
            width: 100%;
            height: 100%;
            z-index: 1;
          }
          .room{
            position: relative;
            z-index: 10;
          }
           .name{
             font-weight: bold;
             color:#222;
             font-size: 34rpx;
             margin-bottom:10rpx;
           }
           .text{
             font-size:24rpx;
           }
         }
       }
       .list_msg{
         color:#666666;
         background: #fff;
         .list{
           padding:0 26rpx;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding-bottom:34rpx;
           font-size:28rpx;
           &:last-child{
             padding-bottom:20rpx;
           }
         }
         &.on{
           color:#979797;
           border-bottom-right-radius: 15rpx;
           border-bottom-left-radius: 15rpx;
         }
       }
       
       .button_box{
         display: flex;
         padding:0 26rpx 26rpx 26rpx;
         background: #fff;
         justify-content: flex-end;
         p{
           width: 196rpx;
           height: 68rpx;
           line-height: 68rpx;
           font-size:28rpx;
           border:1px solid #222222;
           border-radius: 6rpx;
           text-align: center;
         }
         .xd{
           background: #222;
           color:#fff;
         }
         .anniu{
           width: 196rpx;
           height: 72rpx;
           line-height: 72rpx;
           font-size:28rpx;
           border:1px solid #222222;
           border-radius: 6rpx;
           text-align: center;
           background: #fff;
           color:#222;
         }
         button::after {
           border: none;
         }
         button{
           width: 196rpx;
           height: 72rpx;
           line-height: 72rpx;
           font-size:28rpx;
           border:1px solid #222222;
           border-radius: 6rpx;
           text-align: center;
           background: #fff;
           color:#222;
           margin:0;
         }
       }
       .see_xq{
         height: 80rpx;
         line-height: 80rpx;
         background: #fff;
         text-align: center;
         font-size:26rpx;
         color:#222;
       }
       .status1{
         background: #fff;
         padding:26rpx 26rpx 0 26rpx;
         border-top-left-radius: 15rpx;
         border-top-right-radius: 15rpx;
         p{
           display: inline-block;
           padding:8rpx 18rpx;
           background: #f0f0f0;
           font-size:28rpx;
           color:#9a9a9a;
         }
       }
       .name_box{
          font-size:32rpx;
          color:#9a9a9a;
          font-weight: bold;
          padding:0 26rpx;
          background: #fff;
          padding-top:20rpx;
          padding-bottom:26rpx;
          p{
            padding-bottom:24rpx;
            border-bottom:1px solid #f7f7f7;
          }
       }
       &.on{
         filter: grayscale(100%);
         .orderId{
           color:#9A9A9A;
         }
         .msg{
           color:#9A9A9A;
           .name{
             color:#9A9A9A;
           }
         }
         .list_msg{
           color:#9A9A9A;
         }
         .msg{
           background: #F2F2F2;
         }
       }
     }
   }
   .no_data{
     text-align: center;
     font-size:28rpx;
     color:#333;
     padding-top:150rpx;
     .text{
       font-weight: bold;
       color:#999;
     }
     img{
       width: 248rpx;
       margin-bottom:10rpx;
     }
     .button{
       width: 240rpx;
       height: 70rpx;
       line-height: 70rpx;
        background: #02b4ae;
       // background: #35c982;
       border-radius: 120rpx;
       text-align: center;
       font-size: 30rpx;
       color: #fff;
       margin-top: 30rpx;
       margin: 30rpx auto 0 auto;
     }
   }
   .pop{
  /deep/.van-popup{
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    overflow: visible;
  }
  .box{
    width: 100%;
    height: 1000rpx;
    .title{
      padding:30rpx 30rpx 0 30rpx;
      font-size:30rpx;
      font-weight: bold;
    }
    .list_box{
      max-height:82%;
      overflow: auto;
    }
    .list_item{
          padding:30rpx 30rpx 0 30rpx;
          border-radius: 20rpx;
          margin-bottom:20rpx;
          background: #fff;
          display: flex;
          justify-content: space-between;
          border-bottom:1px solid rgba(240, 240, 240, 1);
              .room_btn{
              width: 24%;
              margin-top: 20px;
              text-align: right;
              p{
                  
                  height: 64rpx;
                  text-align: center;
                  line-height: 64rpx;
                  border-radius: 10rpx;
                  font-size:28rpx;
                  border:1px solid transparent;
              }
              .btn1{
                  border: 1px solid #80A952;
                  color:#80A952;
              }
                .btn2{
                  color: #fff;
                  padding: 1px;
              }
              .active{
                  opacity: 0.5;
              }
          }
      .list{
          display: flex;
          padding-bottom:30rpx;
          .img{
              position: relative;
              .bj{
                  width: 170rpx;
                  height: 170rpx;
                  // background: #aaa;
                  border-radius: 10rpx;
                  overflow: hidden;
                  img{
                      width: 100%;
                      height: 100%;
                  }
              }
              .num{
                  position: absolute;
                  bottom:20rpx;
                  right:10rpx;
                  padding:0rpx 20rpx;
                  background: rgba(0, 0, 0,0.5);
                  border-radius: 30rpx;
                  color:#fff;
                  font-size:26rpx;
                  display: flex;
                  align-items: center;
                  img{
                      width: 26rpx;
                      height: 26rpx;
                      margin-right:10rpx;
                  }
              }
              .sy{
                  position: absolute;
                  top:0;
                  left: 0;
                  width: 120rpx;
                  height: 40rpx;
                  background: #80A952;
                  color:#fff;
                  font-size:24rpx;
                  border-top-left-radius: 10rpx;
                  border-bottom-right-radius: 10rpx;
                  text-align: center;
                  line-height: 40rpx;
              }
          }
      
          .room_msg{
              margin-left:20rpx;
              flex: 1;
              .name{
                  color:rgba(35, 35, 35, 1);
                  font-size:34rpx;
                  font-weight: bold;
              }
              .label_box{
                  display: flex;
                  font-size:26rpx;
                  color:rgba(102, 102, 102, 1);
                  margin:10rpx 0 40rpx 0;
                  p{
                      margin-right:20rpx;
                  }
              }
              .price_box{
                  display: flex;
                  justify-content: space-between;
                  .price{
                      color:#80A952;
                      font-size:34rpx;
                      font-weight: bold;
                      span{
                          font-size:24rpx;
                          font-weight: 500;
                      }
                  }
                  .anniu{
                      width: 150rpx;
                      height: 50rpx;
                      text-align: center;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      border:1px solid #aaa;
                      font-size:28rpx;
                      border-radius: 10rpx;
                  }
              }
          }
      }
    }
  }
}
  }
  </style>